<template>
    <header>
        <div class="searchInput">
            <span>姓名:</span>
            <el-input v-model="para.name" placeholder="姓名" />
        </div>
        <div class="searchInput">
            <span>电话:</span>
            <el-input v-model="para.phone" placeholder="电话" />
        </div>


        <div class="searchButton">
            <el-button @click="getList" round>查找</el-button>
            <el-button @click="createObj" round>添加</el-button>
        </div>
    </header>

    <main>
        <el-table :data="userData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="phone" label="电话" width="100" />
            <el-table-column prop="state" label="状态" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>

    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 50, 200]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />
    </footer>

    <el-dialog v-model="showDialog">
        <div>
            <span>名称:</span>
            <el-input v-model="obj.name"></el-input>
        </div>
        <div>
            <span>电话:</span>
            <el-input v-model="obj.phone"></el-input>
        </div>
        <div v-if="isUpdate">
            <span>状态:</span>
            <el-input v-model="obj.state" readonly></el-input>
        </div>
        <div>
            <button @click="insertData">提交</button>
        </div>
    </el-dialog>
</template>

<script  setup>



import axios from 'axios';
import { ElMessage } from 'element-plus'
import { onMounted, ref, reactive } from 'vue';
import {
    Plus,
    Search,

} from '@element-plus/icons-vue'
const input = ref('')

//user表数据
const userData = ref([])
//user数据
const para = ref({
    name: null,
    state: null,
    phone: null
})
//是否对对象修改过
const isUpdate = ref(false);
//是否弹窗
const showDialog = ref(false)
//分页请求
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});
//obj对象
const obj = ref({
    name: null,
    phone: null,
    state: null,
})
//创建对象,弹窗
const createObj = () => {
    obj.value.id = null,
        obj.value.name = null,
        obj.value.phone = null,
        obj.value.password = null,
        obj.value.state = null;

    isUpdate.value = false,
        showDialog.value = true
}
// vue的刷新方法
onMounted(() => {
    getList();
})
//添加user到数据库
const insertData = () => {
    const axiosPara = {
        data: obj.value
    };
    if (isUpdate.value) {
        axiosPara.method = "PATCH";
        axiosPara.url = "/api/user/modify";
    } else {
        axiosPara.method = "POST";
        axiosPara.url = "/api/user/create";
    }
    console.log(obj.value)
    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            resp.name = obj.value.name;
            resp.phone = obj.value.phone;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
}
//删除
const handleDelete = (row) => {
    console.log(row)
    axios({
        url: "/api/user/delete/" + row.id,
        method: "delete"
    }).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage.info(`删除${row.name}成功`);
            getList();
        } else {
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};
//修改
const handleEdit = (row) => {
    obj.value.name = row.name;
    obj.value.phone = row.phone;
    obj.value.state = row.state;
    obj.value.id = row.id;

    isUpdate.value = true;
    showDialog.value = true;
};


//查询
let getList = () => {
    axios({
        method: "Post",
        url: "/api/user/list",
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            userData.value = resp.data.data.list;
            pageInfo.total = resp.data.data.count;
            console.log(para.value)
            console.log(resp.data)
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常", resp)
        }
    }).catch((e) => {
        console.log("出现异常：", e)
    })
}






</script>

<style scoped></style>